<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>上传商品</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/my.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/exif.js"></script>
	<script src="../js/hammer.js"></script>
	<script src="../js/iscroll-zoom1.js"></script>
	<script src="../js/lrz.all.bundle.js"></script>
	<script src="../js/jquery.photoClip.js"></script>
    <style>
        body{
            background: #f9f9f9;
            width: 100%;
    		overflow: hidden;
        }
        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }
        .Publish_goods textarea{
            font-size: 14px;
        }


        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }

        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }

        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }

        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }

        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }



        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }

        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }

        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }
        .upimg{
            width: 60px;
            height: 60px;
        }
        #body{
            margin-top: -6px;
            border-bottom: solid 1px #ddd;
        }
        #clipArea{
        	position: fixed;
        	left: 0;
        	top: 0;
        	width: 100%;
        	height: 100%;
        	display: none;
        }
        #clipBtn{
        	position: absolute;
        	right: 0;
        	bottom: 0;
        	width: 150px;
        	height: 40px;
        	font-size: 14px;
        	line-height: 40px;
        	text-align: center;
        	background: #5F3104;
        	border-radius: 9px;
        	color: #FFF;
        	z-index: 100;
        }
    </style>
</head>

<body>
<!--头部-->
<!--<div class="public-header flex">
    &lt;!&ndash;<span class="public-header-left-search"></span>&ndash;&gt;
    <span class="public-header-left-back"></span>
    <span class="public-header-center">某个分类</span>
    <span class="public-header-right"></span>
</div>-->
	<div class="Publish_goods bc-gray" style="margin-top: 8px;">
	    <textarea name="" id="txt_intro" style="border: none;padding: 0 12px;box-sizing: border-box;" cols="30" rows="10" placeholder="我的产品描述(至少十个字)......" v-model="datas"></textarea>
	    <div id="body" class="light">
	        <div id="content" class="show">
	            <div class="demo">
	                <div class="upload_box">
	                    <div class="upload_main">
	                        <div id="preview" class="upload_preview">
	                        	<div class="upload_choose" style="float: left;position: relative;"><!---->
		                            <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
		                            <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;"/>
	                        	</div>
	                        </div>
	                        
	                    </div>
	                    <div class="upload_submit">
	                        <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	    <p class="tip flex" style="position: relative;">
	        <span style="font-size: 14px;">鉴定证书</span>
	        <span id="issc" style="position: absolute;right: 50px;font-size: 14px;">未上传</span>
	        <img src="../img/报表@2x.png"  style="position: absolute;right: 10px;top: 10px;">
	        <input type="file" onchange="selectFileImage2(this)" style="opacity: 0.1;right: 10px;width: 25px;position: absolute;top: 8px;">
	    </p>
	    <p class="p2" style="font-size: 14px;">
	        <span style="color: #121212;opacity: 0.25">下一步即表示同意</span><span onclick="clickXy()">《紫陶汇竞拍服务协议》</span>
	    </p>
	    <section class="button flex">
	        <span class="left" style="font-size: 14px;" onclick="truePost()">存为草稿</span>
	        <span class="right" id="nextClick" style="font-size: 14px;">下一步</span>
	    </section>
	</div>
	<div id="clipArea">
		<div id="clipBtn">确认裁剪并上传</div>
	</div>
</body>
<script>
    var zhengshu = '';
    var imgss = '';
    var ids = GetQueryString("id");
    var pids = GetQueryString("pid");
    sessionStorage.removeItem('keywords');
    $(function () {
        if(!isNull(ids)){
            $.ajax({
                url:base_url+"ZITAOHUI/draftDetail",
                data:{
                    auctionSetId:ids
                },
                dataType:"json",
                success:function (data){
                  var _d = data.extend.data[0];
                  if(_d.is_Identifiable ==' '|| _d.is_Identifiable == 'undefined'|| _d.is_Identifiable == 'null'){
                      zhengshu = '';
                      $("#issc").text("未上传");
                  }else{
                      zhengshu = _d.is_Identifiable;
                      $("#issc").text("已上传");
                  }
                  $("#txt_intro").val(_d.produceDescribe);
                  for(var i = 0;i < _d.images.length;i++){
                      $('.upload_choose').before('<div class="img-div" style="float: left;position: relative;margin-right: 0.2rem;"><img class= "upimg" imgurl="' + _d.images[i].produceImages + '" src=' + _d.images[i].produceImages + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
                  }
                },
                error:function (){
                }
            })
        }
        $('#add_img').click(function () {//点击图片触发input上传
            $('#add_img').hide();
            if($('.img-div').length<10){
            	$('#fileImage').click();
            }else{
            	alert('最多只能上传九张图片');
            }
        })
        $("#nextClick").click(function (){
            if(isNull($("#txt_intro").val())){
                alert("请填写您的物品描述");
                return false;
            }
            var $len = $("#preview .img-div").length;
            if($len == 0){
                alert("请上传图片");
                return false;
            }
            var keywords = $("#txt_intro").val();
            var imgs = '';
            sessionStorage.keywords = keywords;//把产品的描述存在sessionStorage中，然后Publish_goods_next.html中获取
            for(var i = 0;i< $(".upimg").length;i++){
                imgs+=","+$(".upimg").eq(i).attr("imgurl");
            }
            imgs = imgs.replace(/,/,'');
            imgss = imgs;
            if(isNull(ids)){
                window.location.href = "Publish_goods_next.html?keyworlds="+''+"&imgs="+imgs+"&zsurl="+zhengshu;
            }else{
                window.location.href = "Publish_goods_next.html?keyworlds="+''+"&imgs="+imgs+"&zsurl="+zhengshu+"&ids="+ids+"&pids="+pids;
            }

        });
    });
    var $par = $('#preview');
    var clipArea = new bjj.PhotoClip("#clipArea", {//图片上传裁剪插件！
		size: [400, 400],
		outputSize: [800, 800],
		file: "#fileImage",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			////console.log("照片读取中");
		},
		loadComplete: function() {
			////console.log("照片读取完成");
			$('#clipArea').show();
		},
		clipFinish: function(base64) {
			////console.log(base64);
			var newsIndex = base64.indexOf(",");
            var news = base64.substr(parseInt(newsIndex + 1));
            $.ajax({ //上传头像
                type: "post",
                url: base_url+"ZITAOHUI/upload/image",
                data:{
                    imageData:news
                },
                beforeSend:function(){
                	$('#clipBtn').text('上传中……');
                },
                dataType: "json",
                success: function (data) {
                    if (data.code == 1) {
                        //console.log("上传成功");
                        $('#clipArea').hide();
                        $('#clipBtn').text('确认裁剪并上传');
                        var _url = data.extend.msg.fileUrl;
                        $('.upload_choose').before('<div class="img-div" style="float: left;position: relative;margin-right: 0.2rem;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
                    	if($('.img-div').length==9){//上传了9张以后，把添加图片的按钮删除
                    		$('.upload_choose').hide();
                    	}
                    } else{
                        alert("上传失败");
                    }
                },
                error: function (error) {

                }
            })
		}
	});
    
    
    function selectFileImage1111111111111(fileObj) {

        var $len = $("#preview .img-div").length;
        if($len == 3){
            alert("对不起，最多可以上传3张哦！");
            return false;
        }
//            var $len = $(fileObj).parent().siblings('.imgdiv').find('div').length;
//        //console.log("长度="+$len);
//            if ($len == 3) {
//                layer.open({
//                    content: '感谢小主，评价最多可传3张图哦'
//                    , skin: 'msg'
//                    , time: 2 //2秒后自动关闭
//                });
//                return false;
//            }
//            var data_id = $(fileObj).attr("data-id");
//            var data_index = $(fileObj).attr("data-index");
        var obj = fileObj;
        var file = fileObj.files['0'];
        ////console.log(file.size);
        //图片方向角 added by lzk
        var $par = $(this).parent().find(".upload_preview");
        var Orientation = null;

        if (file) {
//            layer.open({type: 2});

            //获取照片方向角属性，用户旋转控制
            EXIF.getData(file, function () {
                // //alert(EXIF.pretty(this));
                EXIF.getAllTags(this);
                ////alert(EXIF.getTag(this, 'Orientation'));
                Orientation = EXIF.getTag(this, 'Orientation');
                //return;
            });

            var oReader = new FileReader();
            oReader.onload = function (e) {
                //var blob = URL.createObjectURL(file);
                //_compress(blob, file, basePath);
                var image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    var imgWidth = this.width;
                    var imgHeight = this.height;

                    // 控制上传图片的宽高
                    if (imgWidth > imgHeight && imgWidth > 750) {
                        imgWidth = 750;
                        imgHeight = Math.ceil(750 * this.height / this.width);
                    } else if (imgWidth < imgHeight && imgHeight > 1334) {
                        imgWidth = Math.ceil(1334 * this.width / this.height);
                        imgHeight = 1334;
                    }
                    var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext('2d');
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    if (Orientation && Orientation != 1) {
                        switch (Orientation) {
                            case 6:     // 旋转90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(Math.PI / 2);
                                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 3:     // 旋转180度
                                ctx.rotate(Math.PI);
                                ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 8:     // 旋转-90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(3 * Math.PI / 2);
                                ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                                break;
                        }
                    } else {
                        ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                    }
                    base64 = canvas.toDataURL("image/jpeg", 0.8);

                    var $par = $(obj).parent().siblings(".upload_preview");
                    var newsIndex = base64.indexOf(",");
                    var news = base64.substr(parseInt(newsIndex + 1));
                    //console.log(news);
                    $.ajax({ //上传头像
                        type: "post",
                        url: base_url+"ZITAOHUI/upload/image",
                        data:{
                            imageData:news
                        },
                        dataType: "json",
                        success: function (data) {
                            ////////console.log(data);
                            if (data.code == 1) {
                                //console.log("上传成功");
//                                    _imgarr.push(
//                                        {
//                                            id: data_id,
//                                            url: data.fileUrl
//                                        }
//                                    );
                                var _url = data.extend.msg.fileUrl;
//                                saveHeaImg(new_url);
                                $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 0.2rem;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');
//                                    var $len = $(fileObj).parent().siblings('.imgdiv').find('div').length;
//                                //console.log("上传成功之后的长度="+$len);
//                                    if ($len == 3) {
//                                        $(fileObj).attr("disabled", 'false');
//                                        layer.open({
//                                            content: '感谢小主，评价最多可传3张图哦'
//                                            , skin: 'msg'
//                                            , time: 2 //2秒后自动关闭
//                                        });
//                                    }
                                ////console.log(_imgarr);
                            } else{
                                alert("上传失败");
                            }
                        },
                        error: function (error) {

                        }
                    })
                    //////console.log(news);

                };
            };
            oReader.readAsDataURL(file);
        }
    }
    function selectFileImage2(fileObj) {
        var obj = fileObj;
        var file = fileObj.files['0'];

        var $par = $(this).parent().find(".upload_preview");
        var Orientation = null;

        if (file) {
            //获取照片方向角属性，用户旋转控制
            EXIF.getData(file, function () {
                // //alert(EXIF.pretty(this));
                EXIF.getAllTags(this);
                ////alert(EXIF.getTag(this, 'Orientation'));
                Orientation = EXIF.getTag(this, 'Orientation');
                //return;
            });

            var oReader = new FileReader();
            oReader.onload = function (e) {
                var image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    var imgWidth = this.width;
                    var imgHeight = this.height;

                    // 控制上传图片的宽高
                    if (imgWidth > imgHeight && imgWidth > 750) {
                        imgWidth = 750;
                        imgHeight = Math.ceil(750 * this.height / this.width);
                    } else if (imgWidth < imgHeight && imgHeight > 1334) {
                        imgWidth = Math.ceil(1334 * this.width / this.height);
                        imgHeight = 1334;
                    }
                    var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext('2d');
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    if (Orientation && Orientation != 1) {
                        switch (Orientation) {
                            case 6:     // 旋转90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(Math.PI / 2);
                                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 3:     // 旋转180度
                                ctx.rotate(Math.PI);
                                ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 8:     // 旋转-90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(3 * Math.PI / 2);
                                ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                                break;
                        }
                    } else {
                        ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                    }
                    base64 = canvas.toDataURL("image/jpeg", 0.8);
                    var newsIndex = base64.indexOf(",");
                    var news = base64.substr(parseInt(newsIndex + 1));
                    //console.log(news);
                    $.ajax({ //上传头像
                        type: "post",
                        url: base_url+"ZITAOHUI/upload/image",
                        data:{
                            imageData:news
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 1) {
                                //console.log("上传成功");
                                var _url = data.extend.msg.fileUrl;
                                zhengshu = _url;
                                $("#issc").text("已上传");
//
                            } else{
                                $("#issc").text("未上传");
                            }
                        },
                        error: function (error) {

                        }
                    })
                    //////console.log(news);

                };
            };
            oReader.readAsDataURL(file);
        }
    }
    function delImg (obj){//点击图片右上角执行的函数
        $(obj).parent().remove();
        $('.upload_choose').show();
    }



    function truePost (){//存为草稿箱点击事件
        var imgs = '';
        for(var i = 0;i< $(".upimg").length;i++){
            imgs+=","+$(".upimg").attr("imgurl");
        }
        imgs = imgs.replace(/,/,'');
        imgss = imgs;
        var keywords = $("#txt_intro").val();
        keywords = keywords.replace(/ /,'');
        if(keywords.length <= 0){
            alert("物品描述至少十个字");
            return false;
        }
//        var simgs = '';
//        if(isNull(imgss)){
//            simgs = zhengshu;
//        }else{
//            simgs = imgss +","+zhengshu;
//        }
        $.ajax({
            url:base_url+"ZITAOHUI/saveAuctionSet",
            data:{
                produceDescribe:keywords,//产品描述，
                images:imgss,
                appraisal:zhengshu,
                onlyStoreId:sessionStorage.getItem("s_id"),
                value:'2'
            },
            type:"POST",
            dataType:"json",
            success:function (data){
                if(data.code == 1){
                    alert("保存成功");
                    window.location.href = "Lot-management.html";
                }else{
                    alert("保存失败");
                }
            },
            error:function (error){
                //console.log(error);
            }
        })

    }
    function clickXy(){
        window.location.href = "zthxy.html"
    }
</script>
</html>